﻿@{
    Layout = null;

    var list = ViewData["List"] as Pay.DTO.model.logistic_results;
    var payinfo = ViewData["payinfo"] as Pay.DTO.order_dto;

}
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta name="format-detection" content="telphone=no, email=no" />
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="msapplication-tap-highlight" content="no">
    <link rel="stylesheet" type="text/css" href="~/Content/css/reset.css" />

    <style type="text/css">
        .logistics_top {
            position: relative;
            height: 86px;
        }

            .logistics_top .icon_logistics {
                position: absolute;
                top: 30px;
                left: 35px;
                width: 35px;
                height: 29px;
            }

        .log_sp {
            font-size: 14px;
            color: #333333;
            position: absolute;
            left: 104px;
        }

        .oddnum {
            top: 15px;
        }

        .company {
            top: 45px;
        }

        .logbg {
            width: 90%;
            height: 10px;
            background: #F8F8F8;
            margin: 0 auto;
        }

        .logistic_detail {
            width: 90%;
            margin: 0 auto;
        }

        .logst_tit {
            font-size: 15px;
            color: #333333;
            display: block;
            height: 42px;
            line-height: 42px;
            border-bottom: 1px solid #EDEDED;
            font-weight: normal;
        }

        .logname {
            font-size: 14px;
            color: #666666;
            padding: 13px 0 0 0;
        }

        .track-list {
            margin: 20px;
            padding-left: 30px;
            position: relative;
            border-bottom: 1px solid #EDEDED;
            padding-bottom: 20px;
        }

            .track-list li {
                position: relative;
                padding: 9px 0 0 25px;
                line-height: 30px;
                border-left: 1px solid #EDEDED;
                ;
                color: #999;
            }

                .track-list li.first {
                    padding-top: 0;
                    border-left-color: #EDEDED;
                }

                .track-list li .node-icon {
                    position: absolute;
                    left: -8px;
                    top: 50%;
                    width: 15px;
                    height: 15px;
                    background: #E5E5E5;
                    border-radius: 100%;
                }


                .track-list li .node-icon-red {
                    background: #D0021B;
                }



                .track-list li .time {
                    font-size: 12px;
                    color: #999999;
                    margin-right: 20px;
                    position: relative;
                    top: 4px;
                    display: inline-block;
                    vertical-align: middle;
                }

                .track-list li .txt {
                    font-size: 14px;
                    color: #333333;
                    position: relative;
                    top: 4px;
                    display: inline-block;
                    vertical-align: middle;
                }


                .track-list li.first .time {
                    margin-right: 20px;
                    color: #D0021B;
                }

                .track-list li.first .txt {
                    max-width: 600px;
                    color: #D0021B;
                }
    </style>
</head>

<body>

    <div class="logistics">
        <div class="logistics_top">
            <img src="~/Content/images/wuliu@2x.png" alt="" class="icon_logistics" />
            <span class="log_sp oddnum">快递单号：@payinfo.shipping.ship_order_number</span>
            <span class="log_sp company">快递公司：EMS</span>

        </div>
        <div class="logbg"></div>

        <div class="logistic_detail">
            <h1 class="logst_tit">物流跟踪</h1>

            <div class="loglist">
                <p class="logname">国外配送</p>
                <div class="track-rcol">
                    <div class="track-list">
                        <ul>
                            @if (list != null && list.Traces.ToList().Count > 0) {
                                for (int index = 0; index < list.Traces.ToList().Count; index++) {
                                    if (index == 0) {
                        <li class="first">
                            <i class="node-icon node-icon-red"></i>
                            <span class="txt">@list.Traces.ToList()[index].AcceptStation</span>
                            <span class="time">@list.Traces.ToList()[index].AcceptTime</span>
                        </li>
                                    } else {
                        <li>
                            <i class="node-icon"></i>
                            <span class="txt">@list.Traces.ToList()[index].AcceptStation</span>
                            <span class="time">@list.Traces.ToList()[index].AcceptTime</span>
                        </li>
                                    }
                                }
                            }




                        </ul>
                    </div>
                </div>

            </div>



        

        </div>

    </div>

</body>

</html>

